<template>
  <div class="org-main-header">
    <span class="org-main-title-text">{{ title }}</span>
    <el-tag
      v-if="showTag"
      type="warning"
      effect="plain"
      size="mini"
      class="org-main-has-auth"
      @click="goAuth"
    >
      未认证
    </el-tag>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';

  import { hasAuthOrg } from '@/api/organization';

  export default {
    props: {
      title: {
        type: String,
        default: '',
      },
      titleType: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        hasAuth: false,
        isCompany: false,
      };
    },
    computed: {
      ...mapGetters('user', ['userInfo']),
      organizationId() {
        return this.userInfo.organId;
      },
      showTag() {
        return this.isCompany && !this.hasAuth;
      },
    },
    watch: {
      titleType(type) {
        this.isCompany = type === 'company';
        if (this.isCompany) {
          this.getAuth();
        }
      },
    },
    mounted() {
      this.isCompany = this.titleType === 'company';
      if (this.isCompany) {
        this.getAuth();
      }
    },
    methods: {
      async getAuth() {
        const { data } = await hasAuthOrg(this.organizationId);
        this.hasAuth = data;
      },
      goAuth() {
        this.$emit('on-auth', this.organizationId);
      },
      flushAuth() {
        this.getAuth();
      },
    },
  };
</script>

<style lang="scss" scoped>
  .org-main-header {
    height: 50px;
    background-color: #ffffff;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
  }
  .org-main-title-text {
    color: #4f4d50;
    margin-right: 10px;
  }
  .org-main-has-auth {
    cursor: pointer;
    font-weight: normal;
  }
</style>
